import { QuestionCircleOutlined } from "@ant-design/icons";
/*
 * @Descripttion: 搜索结果展示列表(项目列表页)
 * @Author: 毕怀智
 * @Date: 2021-11-11 21:24:19
 * @Function: use of this file
 */
import {
  Button,
  Dropdown,
  Menu,
  Modal,
  Table,
  TableProps,
  Tooltip,
} from "antd";
import { constants } from "buffer";
import { log } from "console";
import dayjs from "dayjs";
import moment from "moment";
import React from "react";
import { Link } from "react-router-dom";

import { useDeleteProject, useEditProject } from "api/Projects";
import { Pin } from "components";
import { Project } from "types/Project";
import { User } from "types/User";

import { useProjectModal, useProjectsQueryKey } from "../utils";

interface ISearchListProps extends TableProps<Project> {
  users: User[];
}
//项目列表页
const SearchList = React.memo((props: ISearchListProps) => {
  const { mutate } = useEditProject(useProjectsQueryKey());
  const pinProject = (id: number) => (pin: boolean) => mutate({ id, pin });

  // console.log("list render");

  const More = ({ project }: { project: Project }) => {
    const { startEdit } = useProjectModal();
    const editProject = (id: number) => () => startEdit(id);
    const { mutate: deleteProject } = useDeleteProject(useProjectsQueryKey());
    const confirmDeleteProject = (id: number) => {
      Modal.confirm({
        title: "确定删除这个项目吗?",
        // content: "点击确定删除",
        okText: "确定",
        cancelText: "取消",
        onOk() {
          deleteProject({ id });
        },
      });
    };
    const compareFunction = (a, b) => {
      if (a < b) {
        // 按某种排序标准进行比较, a 小于 b
        return -1;
      }
      if (a > b) {
        return 1;
      }
      // a must be equal to b
      return 0;
    };

    return (
      <>
        <a onClick={editProject(project.id)} key={"edit"}>
          编辑
        </a>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <a onClick={() => confirmDeleteProject(project.id)} key={"delete"}>
          删除
        </a>
      </>
    );
  };

  return (
    <Table
      // style={{paddingBottom:10,paddingTop:10}}
      rowKey="id"
      pagination={{ pageSize: 10 }}
      scroll={{ x: 500 }}
      // pagination={false}
      columns={[
        {
          title: "ID",
          dataIndex: "id",
        },
        {
          title: <Pin checked={true} disabled={true} />,
          render(value, project) {
            return (
              <Pin
                checked={project.pin}
                onCheckedChange={pinProject(project.id)}
              />
            );
          },
        },

        {
          title: "名称",
          dataIndex: "name",
          sorter: (a, b) => a.name.localeCompare(b.name),
          render(value, project) {
            return <Link to={String(project.id)}>{value}</Link>;
          },
        },
        {
          title: "部门",
          dataIndex: "organization",
        },
        {
          title: "负责人",
          render(value, project) {
            return (
              <span>
                {props.users.find((user) => user.id === project.personId)
                  ?.name || "未知"}
              </span>
            );
          },
        },
        {
          title: "创建时间",
          dataIndex: "created",
          sorter: (a: any, b: any) => a.created - b.created,
          render(value, project) {
            return (
              <span>
                {project.created
                  ? dayjs(project.created).format("YYYY-MM-DD HH:mm:ss")
                  : "无"}
              </span>
            );
          },
        },
        {
          title: "备注",
          dataIndex: "text",
          width: 200,
          render(value, project) {
            return (
              <Tooltip
                title={value}
                overlayStyle={{ width: 250, fontSize: 13 }}
              >
                <div
                  style={{
                    width: 200,
                    overflow: "hidden",
                    whiteSpace: "nowrap",
                    textOverflow: "ellipsis",
                    fontSize: 15,
                  }}
                >
                  {value ? value : "-"}
                </div>
              </Tooltip>
            );
          },
        },
        {
          title: "操作",
          render(value, project) {
            return <More project={project} />;
          },
        },
      ]}
      {...props}
    />
  );
});

export default SearchList;
